<!-- directive:title 云袭表单 投入项目使用 五星评级 -->
<!-- directive:breadcrumb 表单插件集1.4 -->
<!-- 表单 -->
<div class="panel-body">
    <form class="yxf14 bigpadding" name="From">
        <b class="yxf14-title"><i></i>重新整理的表单</b>
        <p><code>[调试开关请忽略]</code><kbd>frm.showDebugger = {{frm.showDebugger}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label">调试开关</label>
            <div class="yxf14-control">
                <label class="checkbox-inline i-switch">
                    <input type="checkbox" ng-model='frm.showDebugger'> <i></i>
                </label>
                <b class="note">请忽略我请忽略我请忽略我请忽略我</b>
            </div>
            <div class="yxf14-control">
                <b class="note">请忽略我请忽略我请忽略我请忽略我</b>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[输入框/必填/最大长度20]</code><kbd>frm.f01 = {{frm.f01}} {{From.f01.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label must">输入框</label>
            <div class="yxf14-control">
                <input type="text" placeholder="请输入内容" style="width:200px;"
                    ng-model="frm.f01" name="f01"
                    required ng-maxlength="20" maxlength="21">
                <b class="note" ng-hide="(From.f01.$dirty || From.submitted ) && From.f01.$invalid">required ng-maxlength="20" maxlength="21"</b>
                <b ng-show="(From.f01.$dirty || From.submitted ) && From.f01.$invalid"> {{From.f01.$error.required?"必填项":"最大长度20"}} </b>
            </div>
            <div class="yxf14-control" ng-show="(From.f01.$dirty || From.submitted ) && From.f01.$invalid">
                <b>还可以在这里显示错误,{{From.f01.$error.required?"必填项":"最大长度20"}}</b>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[下拉框/必填]</code><kbd>frm.f02 = {{frm.f02}} {{From.f02.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label must">下拉框</label>
            <div class="yxf14-control">
                <input type="text" placeholder="请选择内容" style="width:200px;"
                    ng-model="frm.f02" name="f02"
                    select2 config="frm2.f02list" select2-model="frm2.f02"
                    required
                />
                <b class="note" ng-hide="(From.f02.$dirty || From.submitted ) && From.f02.$invalid">请选择一个你喜欢的</b>
                <b ng-show="(From.f02.$dirty || From.submitted ) && From.f02.$invalid"> 必填项 </b>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[文本域/必填/最多64字符]</code><kbd>frm.f03 = {{frm.f03}} {{From.f03.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label must">文本域</label>
            <div class="yxf14-control">
                <textarea rows="3" placeholder="请输入内容" style="width:400px;"
                    ng-model="frm.f03" name="f03"
                    required maxlength="64">
                </textarea>
                <b class="note"><i>{{ frm.f03.length || 0 }} / 64</i></b>
                <b ng-show="(From.f03.$dirty || From.submitted ) && From.f03.$invalid"> {{From.f03.$error.required?"必填项":""}} </b>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[开关/双向绑定]</code><kbd>frm.f04 = {{frm.f04}} {{From.f04.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label">开关</label>
            <div class="yxf14-control">
                <label class="checkbox-inline i-checks"> <input type="radio" ng-model="frm.f04" convert-to-number value="1"> <i></i>开启</label>
                <label class="checkbox-inline i-checks"> <input type="radio" ng-model="frm.f04" convert-to-number value="0"> <i></i>关闭</label>
            </div>
            <div class="yxf14-control">
                <label class="checkbox-inline i-switch"">
                    <input type="checkbox" ng-model="frm.f04" ng-true-value="1" ng-false-value="0"> <i></i>
                </label>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[伪数字输入框/必填/数字且0-100]</code><kbd>frm.f05 = {{frm.f05}} {{From.f05.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label must">输入框</label>
            <div class="yxf14-control">
                <input type="text" placeholder="请输入内容" style="width:200px;"
                    ng-model="frm.f05" name="f05"
                    required ui-validate=" '$value>=0&&$value<=100' " maxlength="7">
                <b class="note" ng-hide="(From.f05.$dirty || From.submitted ) && From.f05.$invalid">required ui-validate=" '$value>=0&&$value&lt;=100' "</b>
                <b ng-show="(From.f05.$dirty || From.submitted ) && From.f05.$invalid"> {{From.f05.$error.required?"必填项":"请输入0-10"}} </b>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[级联开关/开启后选择时间/不能大于已知值]</code><kbd>frm.f06 = {{frm.f06}} {{From.f06.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label must">级联开关</label>
            <div class="yxf14-control">
                <label class="checkbox-inline i-checks"> <input type="radio" ng-checked="frm.f06>0" ng-click="frm.f06='15'"> <i></i>开启</label>
                <label class="checkbox-inline i-checks"> <input type="radio" ng-checked="frm.f06==0" ng-click="frm.f06='0'"> <i></i>关闭</label>
            </div>
            <div class="yxf14-control" ng-show="frm.f06>0">
                <label class="checkbox-inline i-checks" > <input type="radio" ng-model="frm.f06" convert-to-number value="15"> <i></i>15</label>
                <label class="checkbox-inline i-checks" ng-show="frm.f05>=30"> <input type="radio" ng-model="frm.f06" convert-to-number value="30"> <i></i>30</label>
                <label class="checkbox-inline i-checks" ng-show="frm.f05>=60"> <input type="radio" ng-model="frm.f06" convert-to-number value="60"> <i></i>60</label>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[开关/事件触发]</code><kbd>frm.f07 = {{frm.f07}} {{From.f07.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label">开关</label>
            <div class="yxf14-control">
                <span class="checkbox-inline i-switch" ng-click="frm2.f07change()">
                    <input type="checkbox" ng-checked="frm.f07" disabled> <i></i>
                </span>
                <b class="note">这么做的原因是不能在判断允许改变状态前就改了状态！</b>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[日期]</code><kbd>frm.f08 = {{frm.f08}} {{From.f08.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label">日期</label>
            <div class="yxf14-control">
                <input type="text" placeholder="请选择日期" style="width:200px;"
                    ng-model="frm.f08" name="f08"
                    datetime-picker config="{format: 'yyyy-mm-dd', startView:'month'}"
                    required>
                <b ng-show="(From.f08.$dirty || From.submitted ) && From.f08.$invalid"> {{From.f08.$error.required?"必填项":"请输入0-10"}} </b>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[可输入枚举项]</code><kbd>frm.f09 = {{frm.f09}} frm.f10 = {{frm.f10}} {{From.f09.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label must">枚举项</label>
            <div class="yxf14-control">
                <input type="text" placeholder="请输入内容" style="width:200px;"
                    ng-model="frm.f09" name="f09"
                    maxlength="5"
                    >
                <button type="button" class="btn btn-danger" ng-submit-btn="frm2.f10add()">添加</button>
                <b class="note">用隐藏的输入框来控制必填</b>
                <input type="text" placeholder="请输入内容" style="display:none;"
                    ng-model="frm.f10" name="f10"
                    required convert-to-string
                    >
                <b ng-show="(From.f10.$dirty || From.submitted ) && From.f10.$invalid"> 必填项 </b>
            </div>
            <div class="yxf14-control">
                <ul class="popupMultiBox">
                   <li ng-repeat="row in frm.f10 track by $index">
                       <span>{{ row }}</span>
                       <i class="glyphicon glyphicon-remove" ng-click="frm2.f10delete($index)" ></i>
                   </li>
                </ul>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[增删表格]</code><kbd>frm.f11f12f13 = {{frm.f11}} {{From.f11.$error}}/{{frm.f12}} {{From.f12.$error}}/{{frm.f13}} {{From.f13.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label">增删表格</label>
            <div class="yxf14-control">
                <input type="text" placeholder="请输入内容" style="width:100px;"
                    ng-model="frm.f11" name="f11"
                    maxlength="5"
                    >
                <input type="text" placeholder="请输入内容" style="width:100px;"
                    ng-model="frm.f12" name="f12"
                    maxlength="5"
                    >
                <input type="text" placeholder="请输入内容" style="width:100px;"
                    ng-model="frm.f13" name="f13"
                    maxlength="5"
                    >
                <button type="button" class="btn btn-danger" ng-submit-btn="frm2.f14add()">添加</button>
                <b ng-show="frm2.f14Btn && (!frm.f11||!frm.f12||!frm.f13)"> 三项必填 </b>
            </div>
            <div class="yxf14-control table-responsive">
                <table class="table" style="max-width:600px;display: inline-block;">
                    <thead>
                        <tr>
                            <th title="名称" style="text-align:left;width:160px;">名称</th>
                            <th title="类型" style="text-align:left;width:160px;">类型</th>
                            <th title="尺寸" style="text-align:left;width:160px;">尺寸</th>
                            <th title="操作" style="text-align:center;width:100px;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-show="!frm.f14.length">
                            <td colspan="99"><center>无数据</center></td>
                        </tr>
                        <tr ng-repeat="row in frm.f14 track by $index">
                            <td style="text-align:left;" title="{{ row.k }}">{{ row.k }}</td>
                            <td style="text-align:left;" title="{{ row.f }}">{{ row.f }}</td>
                            <td style="text-align:left;" title="{{ row.c }}">{{ row.c }}</td>
                            <td style="text-align:center;color:#F44336;" title="关闭">
                                <div class="yxt14ellipsis" ng-click="frm2.f14delete($index)"> <i class="fa fa-close"></i> </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[拍案叫绝的正则]</code></p>
        <div class="yxf14-box">
            <label class="yxf14-label must"><del>漂亮正则 但不推荐这样使用</del></label>
            <div class="yxf14-control">
                <input type="text" placeholder="请输入内容0-1000" style="width:200px;"
                    ng-model="frm.f15" name="f15"
                    required ng-pattern="/^(?!00)(?:[0-9]{1,3}|1000)$/" maxlength="4">
                <b class="note" ng-hide="(From.f15.$dirty || From.submitted ) && From.f15.$invalid">‰</b>
                <b ng-show="(From.f15.$dirty || From.submitted ) && From.f15.$invalid"> {{From.f15.$error.required?"必填项":"0-1000"}} </b>
            </div>
            <div class="yxf14-control">
                <input type="text" placeholder="请输入内容1-500" style="width:200px;"
                    ng-model="frm.f16" name="f16"
                    required ng-pattern="/^(?:[1-9]\d?|[1234]\d{2}|500)$/" maxlength="4">
                <b class="note" ng-hide="(From.f16.$dirty || From.submitted ) && From.f16.$invalid">数字越大，优先级越高</b>
                <b ng-show="(From.f16.$dirty || From.submitted ) && From.f16.$invalid"> {{From.f16.$error.required?"必填项":"1-500"}} </b>
            </div>
            <div class="yxf14-control">
                <input type="text" placeholder="请输入单价 小数点以后两位" style="width:200px;"
                    ng-model="frm.f17" name="f17"
                    required ng-pattern="/^[\+]?\d+\.\d{2}$/" maxlength="20">
                <b class="note" ng-hide="(From.f17.$dirty || From.submitted ) && From.f17.$invalid">小数点以后两位 不能上亿</b>
                <b ng-show="(From.f17.$dirty || From.submitted ) && From.f17.$invalid"> {{From.f17.$error.required?"必填项":"1-500"}} </b>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[替换以上]</code><kbd>frm.f15a = {{frm.f15a}} frm.f16a = {{frm.f16a}} frm.f16a = {{frm.f16a}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label must">替换以上 推荐这样使用</label>
            <div class="yxf14-control">
                <input type="text" placeholder="请输入 整数 0-1000" style="width:200px;"
                    ng-model="frm.f15a" name="f15a"
                    required ng-pattern="/^(?!0)(?:\d*)$/" ui-validate=" '$value>=0&&$value<=1000' " maxlength="4">
                <b class="note" ng-hide="(From.f15a.$dirty || From.submitted ) && From.f15a.$invalid">required ui-validate=" '$value>=0&&$value&lt;=1000' "</b>
                <b ng-show="(From.f15a.$dirty || From.submitted ) && From.f15a.$invalid"> {{From.f15a.$error.required?"必填项":"请输入0-1000"}} </b>
            </div>
            <div class="yxf14-control">
                <input type="text" placeholder="请输入 整数 0-500" style="width:200px;"
                    ng-model="frm.f16a" name="f16a"
                    required ng-pattern="/^(?!0)(?:\d*)$/" ui-validate=" '$value>=1&&$value<=500' " maxlength="3">
                <b class="note" ng-hide="(From.f16a.$dirty || From.submitted ) && From.f16a.$invalid">required ui-validate=" '$value>=0&&$value&lt;=500' "</b>
                <b ng-show="(From.f16a.$dirty || From.submitted ) && From.f16a.$invalid"> {{From.f16a.$error.required?"必填项":"请输入1-500"}} </b>
            </div>
            <div class="yxf14-control">
                <input type="text" placeholder="请输入单价 小数点以后两位" style="width:200px;"
                    ng-model="frm.f17a" name="f17a"
                    required ui-validate=" {error1: 'Rule.isNumFixed2($value)'} " maxlength="12">
                <b class="note" ng-hide="(From.f17a.$dirty || From.submitted ) && From.f17a.$invalid">小数点以后两位 不能上亿</b>
                <b ng-show="(From.f17a.$dirty || From.submitted ) && From.f17a.$invalid"> {{From.f17a.$error.required?"必填项":"小数点以后两位"}} </b>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[推广ID|英文半角逗号]</code><kbd>frm.f18 = {{frm.f18}} {{From.f18.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label must">推广ID</label>
            <div class="yxf14-control">
                <input type="text" placeholder="请输入推广ID，多个用英文半角逗号隔开" style="width:200px;"
                    ng-model="frm.f18" name="f18"
                    required ng-pattern="/^[0-9,\s]+$/" maxlength="2000">
                <b class="note" ng-hide="(From.f18.$dirty || From.submitted ) && From.f18.$invalid">数字或半角逗号</b>
                <b ng-show="(From.f18.$dirty || From.submitted ) && From.f18.$invalid"> {{From.f18.$error.required?"必填项":"数字或半角逗号"}} </b>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[税率/整数/小数1/小数2]</code><kbd>frm.f19 = {{frm.f19}} {{From.f19.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label must">税率</label>
            <div class="yxf14-control">
                <input type="text" placeholder="请输入税率 100 可带两位小数" style="width:200px;"
                    ng-model="frm.f19" name="f19"
                    required ui-validate=" {error1: 'Rule.isNum($value)', error2: '$value>=0&&$value<=100'} " maxlength="5">
                <b class="note">%</b>
                <b class="note" ng-hide="(From.f19.$dirty || From.submitted ) && From.f19.$invalid">税率写0-100的整数或保留1,2位的小数</b>
                <b ng-show="(From.f19.$dirty || From.submitted ) && From.f19.$invalid"> {{From.f19.$error.required?"必填项":"请输入有效范围数字"}} </b>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[账号/50位/数字英文_-]</code><kbd>frm.f20 = {{frm.f20}} {{From.f20.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label must">账号</label>
            <div class="yxf14-control">
                <input type="text" placeholder="请输入账号 50位 不可填写中文" style="width:200px;"
                    ng-model="frm.f20" name="f20"
                    required ng-pattern="/^[0-9a-zA-Z_-]+$/" ng-maxlength="50" maxlength="51">
                <b class="note" ng-hide="(From.f20.$dirty || From.submitted ) && From.f20.$invalid">50位 不可填写中文</b>
                <b ng-show="(From.f20.$dirty || From.submitted ) && From.f20.$invalid"> {{From.f20.$error.required?"必填项":"50位 不可填写中文"}} </b>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[URl匹配格式]</code><kbd>frm.f21 = {{frm.f21}} {{From.f21.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label must">URl</label>
            <div class="yxf14-control">
                <input type="text" placeholder="请输入URl" style="width:200px;"
                    ng-model="frm.f21" name="f21"
                    required ng-pattern="/^((http|ftp|https):\/\/)(([a-zA-Z0-9\._-]+\.[a-zA-Z]{2,6})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,4})*(\/[a-zA-Z0-9\&%_\.\/-~-]*)?$/" maxlength="2000">
                <b ng-show="(From.f21.$dirty || From.submitted ) && From.f21.$invalid"> {{From.f21.$error.required?"必填项":"URl"}} </b>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[文本域/必填/最多64字符/禁止特殊字符/逗号分隔]</code><kbd>frm.f22 = {{frm.f22}} {{From.f22.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label must">指定用户</label>
            <div class="yxf14-control">
                <textarea rows="3" placeholder="请输入用户，多个用英文半角逗号隔开" style="width:400px;"
                    ng-model="frm.f22" name="f22"
                    required ng-pattern="/^[0-9a-zA-Z\u4e00-\u9fa5,]+$/" ng-maxlength="500" maxlength="501">
                </textarea>
                <b class="note"><i>{{ frm.f22.length || 0 }} / 500</i></b>
                <b ng-show="(From.f22.$dirty || From.submitted ) && From.f22.$invalid"> {{From.f22.$error.required?"必填项":"不可使用特殊符号"}} </b>
            </div>
        </div>
        <p ng-show="frm.showDebugger"><code>[图片]</code><kbd>frm.f23 = {{frm.f23}} {{From.f23.$error}}</kbd></p>
        <div class="yxf14-box">
            <label class="yxf14-label">产品主图</label>
            <div class="yxf14-control">
                <div class="btn btnFileimgView" style="padding: 0px;">
                    <img ng-src='{{ frm.f23 ? "http://localhost:4010/"+frm.f23 : "../../images/img.addpic.jpg" }}' />
                    <input fileup type="file" ng-model="frm2.f23" callback="frm2.f23upload()">
                </div>
            </div>
            <div class="yxf14-control">
                <input type="text" placeholder="" style="display:none;"
                    ng-model="frm.f23" name="f23"
                    required>
                <b ng-show="(From.submitted ) && From.f23.$invalid"> 必填项 </b>
            </div>
            <div class="yxf14-control">
                <b class="note">建议尺寸为750像素*400像素,格式为‘.jpg', '.jpeg', '.png'！</b>
                <b ng-show="From.submitted && ! frm.f23">必填项</b>
            </div>
        </div>
        <!-- 提交 -->
        <div class="yxf14-box">
            <div class="yxf14-control">
                <button type="button" class="btn btn-danger" ng-submit-btn="submitFun()">提交表单</button>
            </div>
        </div>
    </form>
</div>
